<template>
  <div class="box" >
    <!-- :style="{height:fullHeight-otherHeight0+'px'}" -->
    <div v-if="!isHome" class="biz">
      <div class="sider" v-if="haveSider" >
        <slot name="sider"></slot>
      </div>
      <div class="header">
        <div v-if="isBreadcrumbs" class="breadcrumbs"><s-breadcrumb /></div>
        <div class="headCustom">
          <slot name="headCustom"></slot>
        </div>
        <div v-if="isSearch" class="search-box">
          <slot name="searchBox"></slot>
        </div>
      </div>
      <div class="content" :class="{ contentwidth: haveSider }" :style="{height:contentHeight+'px'}">
        <!-- {{fullHeight}},{{otherHeight}} ,{{contentHeight}} -->
        <slot name="form" :tableHeight="tableHeight"></slot>
        <div class="table-box" v-if="isStandTable" :style="{height:contentHeight+'px'}">
          <div class="batch-operat">
            <slot name="batchOperat"></slot>
          </div>
          <div class="table-list">
            <slot name="tableList" :tableHeight="tableHeight"></slot>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="home" :style="{height:fullHeight-otherHeight0-3+'px'}">
      <slot name="home"></slot>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/tools/Breadcrumb'
export default {
  components: {
    's-breadcrumb': Breadcrumb
  },
  props: {
    haveSider: {
      type: Boolean,
      default: false,
    },
    isHome: {
      type: Boolean,
      default: false,
    },
    isSearch:{
      type:Boolean,
      default:true
    },
    isStandTable:{
      type:Boolean,
      default:true
    },
    //是否显示面包屑
    isBreadcrumbs:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      //屏幕高度
      fullHeight: document.documentElement.clientHeight,
      //框架顶部和边框高度
      otherHeight0:120,
      //框架顶部和边框高度和header高度+margintop:16
      otherHeight:120+60,
      //header高度  含搜索框高度 最小高度60（不含搜索框高度）
      headerHeight:60,
      //多选栏高度,最小高度30
      batchHeight:40,
      contentHeight:0,
      //表格高度
      tableHeight:document.documentElement.clientHeight-120-60-40,
    }
  },
  watch: {
    '$store.state.screenWidth':function(val){ //监听屏幕宽度变化
      // console.log('监听屏幕宽度变化');
      this.setHeight()
    },
    '$store.state.screenHeight':function(val){ //监听屏幕高度变化
      this.setHeight()
    },
  },
  mounted() {
    this.$nextTick(()=>{
      this.setHeight()
    })
    
  },
  methods: {
    setHeight(){
      window.fullHeight = document.documentElement.clientHeight
      this.fullHeight = window.fullHeight
      let batchOperat=document.getElementsByClassName("batch-operat")[0]
      let headerBox=document.getElementsByClassName("header")[0]
      this.$nextTick(()=>{
        if (headerBox) {
          this.headerHeight=headerBox.offsetHeight?headerBox.offsetHeight:60
          this.otherHeight=this.otherHeight0+this.headerHeight+16
          this.contentHeight=this.fullHeight-this.otherHeight
          this.batchHeight=batchOperat.offsetHeight+10
          // console.log(batchOperat.offsetHeight);
          
          this.tableHeight=this.fullHeight-this.otherHeight-this.batchHeight
          // console.log(this.fullHeight,this.otherHeight,this.headerHeight);
        }
      })
    }
  }, 
}
</script>

<style scoped>

.breadcrumbs{
  padding: 5px 0;
  border-bottom:1px solid #d6d6d6;
  
}
.ant-breadcrumb{
  font-size: 16px !important;
}
.headCustom{
  padding: 5px 0;
}
.box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  padding: 0px;
  margin: 0;
  /* background-color: #fff; */
  
}
.home{
  width: 100%;
  height: 100%;
  /* background-image:url('~@/assets/home.png'); */
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: 0 center;
  background-color: #f0f2f5;
}
.biz{
  height: 100%;
  width: 100%;
}
.sider {
  width: 15%;
  overflow-x: scroll;
  overflow-y: scroll;
  border-right: 1px solid #ccc;
}
.header{
  width: 100%;
  padding: 7px;
  /* min-height: 30px; */
  background-color: #fff;
}
.content {
  width: 100%;
  padding: 0;
  margin-top: 15px;
  background-color: #fff;
  /* border: 1px solid seagreen; */
  overflow-y: scroll;
}
.contentwidth {
  width: 85%;
}
.search-box {
  width: 100%;
  max-height: 130px;
  overflow-y: scroll;
  /* border-bottom: 1px solid #ccc; */
}
.table-box {
  padding: 0 7px;
  width: 100%;
  border: 1px solid #fff;
}
.batch-operat {
  margin-top: 5px;
  width: 100%;
  /* min-height: 30px; */
  /* background-color: #eee; */
  /* border-bottom: 1px solid #ccc; */
  display: flex;
  align-items: center;
  /* justify-content: center; */
}
.table-list {
  width: 100%;
  overflow-y: scroll;
  border: 1px solid #fff;
}
*{
  clear: both; 
}
</style>